<template>
    <view class="container">
        <view class="avatar">
            <view class="upload-image" @click="avatarSelect()">
                <image :src="formData.avatar?formData.avatar:Config.OSS_HOST+Config.AVATAR" class="img" mode="aspectFill"></image>
                <view class="info">
                    <view class="icon">
                        <uni-icons type="camera" size="20" color="#FFF"></uni-icons>
                    </view>
                    <view class="word">上传</view>
                </view>
            </view>
        </view>

        <uni-forms-item label="昵称">
            <uni-easyinput v-model="formData.nickname" placeholder="请输入" :inputBorder="false"/>
        </uni-forms-item>

        <view class="uni-btn submit" @click="submitForm()">保存修改</view>

    </view>
</template>

<script>
import { UserApi } from '@/api/user/UserApi'
import { Http } from '@/utils/Http'

export default {
    data() {
        return {
			Config: this.$Config,
			Common: this.$Common,
			Auth: this.$Auth,
			ShareUtil: this.$ShareUtil,
			State: this.$store.state,
			Dict: this.$Dict,

            formData: {
                avatar: "",
                nickname: ""
            }
        }
    },
    onLoad() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            let that = this
            UserApi.getTokenInfo().then((response) => {
                that.formData = that.Common.assign(that.formData, response)
            })
        },
        avatarSelect() {
            let that = this
            uni.chooseImage({
                success: (chooseImageRes) => {
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    Http.uploadFile({filePath: tempFilePaths[0]}).then((url) => {
                        that.formData.avatar = url
                    })
                }
            });
        },

        submitForm() {
            let that = this
            uni.showModal({
                title: '提示',
                content: '确定修改账号信息吗？',
                success: function (res) {
                    if (res.confirm) {
                        let data = Object.assign({}, that.formData)

                        UserApi.updateInfo(data).then((response) => {
                            that.$store.dispatch('user/getInfo')
                            that.Common.navigateBackRefresh().initPage()
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
page{background: #FFF;}
.container{ padding:0 40px;}
.avatar{ display: flex; justify-content: center; align-items: center; margin:50px 0 30px 0;}
.avatar .upload-image{ width:120px; height:120px; position: relative; overflow: hidden; border-radius: 100%; }
.avatar .upload-image .img{ width:100%; height:100%;}
.avatar .upload-image .info{ position: absolute; left:0px; bottom: 0px; display: flex;
    background: rgba(0,0,0,0.3); width:100%; justify-content: center;
    align-content: center; padding:5px 0;}
.avatar .upload-image .info .word{ color:#FFF; font-size: 14px; }

.nickname{ margin-top:40px; border: solid #eee; border-width: 1px 0px; padding:20px 0px;}
.submit{ margin-top:50px;}

</style>
